<!--报送单 AuditForm-->
<template>
  <Layout>
    <Form ref="queryForm" :model="dataToQuery" :label-width="120">
      <Row v-show="!switchFlag" class="query-form">
        <Col span="8">
          <FormItem label="企业名称：" prop="order">
            <cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgInfo='setQueryCompanyId' :orgTree="true"
                          :currentOrgId="dataToQuery.companyId"
                          :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>
          </FormItem>
        </Col>
        <Col span="8">

        </Col>
        <Col span="8">
          <!--          <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>-->
          <Button @click="reset" class="ivu-btn-reset">重置</Button>
          <Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
        </Col>
      </Row>
      <Row class="query-form">
        <Col span="24">
          <Button size="large" class="ivu-btn-add" icon="md-add" @click="addInfo">新增</Button>
          <!--          <Button type="primary" class="ivu-btn-add" icon="md-cloud-download" @click="exportFormSubmit">导出</Button>-->
        </Col>
      </Row>
    </Form>
    <Table ref='table' :height="tableHeight" no-data-text="没有查询到相关数据!" @on-selection-change='getSelectRows'
           :loading='pageStatus.loading'
           border :columns="columns1" :data="dataTable">
    </Table>
    <Row style="margin-right:10px;">
      <Col span="24">
        <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange"
              @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer
              show-elevator/>
      </Col>
    </Row>
    <Modal :title="getModalTitle('特种设备保养检查记录')" :transfer=false :mask-closable="false" v-model="dialogShow"
           v-if="dataToView && dialogShow"
           :width=800 :styles="{height:'700px'}" class-name='limit-height-dialog'>
      <Row>
        <Col span="24">
          <Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':'modal-form'" :show-message="false"
                :model="dataToView" :rules="mode === 'view'?{} :ruleCustom"
                :label-position="mode === 'view'?'right':'top'" :label-width="mode === 'view'?160:null">
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label='所属单位：' prop='companyId'>
                  <div v-if="mode === 'view'">{{ dataToView.companyName }}</div>
                  <cascader-dom v-else ref='orgCascader' @setOrgInfo='setCompanyId' @setOrgname="setCompanyName"
                                :orgTree="true" :currentOrgId="dataToView.companyId"
                                :setCurrentName="{label:dataToView.companyName,value:dataToView.companyId}"></cascader-dom>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='特种设备名称：' prop='equipmentName'>
                  <div v-if="mode === 'view'">{{ dataToView.equipmentName }}</div>
                  <Input v-else class=''  readonly @on-focus="modelSearch=true" placeholder="请填写特种设备名称" type='text' v-model='dataToView.equipmentName'></Input>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='检查负责人：' prop='principal'>
                  <div v-if="mode === 'view'">{{ dataToView.principal }}</div>
                  <Input v-else class='' placeholder="请填写检查负责人" type='text' v-model='dataToView.principal'></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='保养单位：' prop='maintenancUnit'>
                  <div v-if="mode === 'view'">{{ dataToView.maintenancUnit }}</div>
                  <Input v-else class='' placeholder="请填写保养单位" type='text' v-model='dataToView.maintenancUnit'></Input>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='检查时间：' prop='checkDate'>
                  <div v-if="mode === 'view'">{{ renderViewDate(dataToView.checkDate) }}</div>
                  <DatePicker v-else class="w" placeholder="请选择检查时间" v-model='dataToView.checkDate'></DatePicker>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='保养类型：' prop='maintainType'>
                  <div v-if="mode === 'view'">{{ dataToView.maintainType }}</div>
                  <Input v-else class='' placeholder="请填写保养类型" type='text' v-model='dataToView.maintainType'></Input>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='保养数量：' prop='quantity'>
                  <div v-if="mode === 'view'">{{ dataToView.quantity }}</div>
                  <InputNumber v-else :min="0" class=''  v-model='dataToView.quantity' style="width: 100%;"></InputNumber>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='创建时间：' prop='createDate'>
                  <div v-if="mode === 'view'">{{ renderViewDate(dataToView.createDate) }}</div>
                  <DatePicker v-else readonly class="w" placeholder="请选择创建时间"
                              v-model='dataToView.createDate'></DatePicker>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='填报人：' prop='createUserName'>
                  <div v-if="mode === 'view'">{{ dataToView.createUserName }}</div>
                  <Input v-else readonly class='' placeholder="请填写填报人" type='text'
                         v-model='dataToView.createUserName'></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label='保养过程描述：' prop='maintainDesc'>
                  <div v-if="mode === 'view'">{{ dataToView.maintainDesc }}</div>
                  <Input v-else class='' placeholder="请填写保养过程描述" type='textarea'
                         v-model='dataToView.maintainDesc'></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem v-if="mode === 'view'" label="保养记录：">
                  <div v-show="dataToView.idFiles.length>0" v-for="(item,index) in dataToView.idFiles">
                    <a @click="downloadFiles(item,index)"><span style="color: #3399ff;margin-left: 5px">{{
                        item.fileName
                      }}</span></a>
                    <Progress v-show="uploadListVisible[index]" :percent="uploadListPercent[index]"></Progress>
                  </div>
                </FormItem>
                <FormItem v-else label="保养记录：">
                  <div>
                    <Upload ref="upload"
                            :before-upload="(file) => { beforeUpload(file, 'id') }"
                            :show-upload-list="true"
                            :max-size="10240"
                            multiple
                            type="drag"
                            :action="fileUrl">
                      <div style="padding: 20px">
                        <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                        <p>点击将文件拖拽到这里上传</p>
                      </div>
                    </Upload>
                  </div>
                  <div v-show="dataToView.idFiles.length>0" v-for="(item,index) in dataToView.idFiles" :key="item.id">
                    <a @click.prevent="downloadFiles(item,index)">{{ item.fileName }}</a>
                    <Button type="text" icon="md-trash" @click="removeFile(item.id, 'id')"
                            style="margin-left: 20px;margin-bottom: 3px"/>
                    <Progress  v-show="uploadListVisible[index]" :percent="uploadListPercent[index]"></Progress>
                  </div>
                </FormItem>
              </Col>
            </Row>
          </Form>
        </Col>
      </Row>
      <div slot="footer">
        <Button v-if="mode != 'view'" type="primary" class='ivu-btn-save' @click="submit('dialogForm')">确定</Button>
        <Button v-if="mode != 'view'" type="primary" class='ivu-btn-cancel' @click="handleCancel">取消</Button>
        <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
      </div>
    </Modal>
    <Modal title="特种设备登记" :transfer=false footer-hide v-model="modelSearch" :width=1000>
      <specialEqSafeRptSelect v-if="modelSearch" v-show="modelSearch" :modelSearch="modelSearch"
                               @getSelectModelData='danxuan' ></specialEqSafeRptSelect>
      <div slot="footer">
        <Button class='ivu-btn-save' @click="onCancelSelect">关闭</Button>
      </div>
    </Modal>
  </Layout>
</template>

<script>
import {Api} from '@/api/index.js'
import pageCommonFunction from '@/components/pageCommonFunction.js'
import specialEqSafeRptSelect from "@/views/safe/rpt/specialEqSafeRpt/specialEqSafeRptSelect";
var cascaderDom = () => import('@/components/cascader-dom.vue');

export default {
  name: "SpecialEqMaintain",
  components: {
    cascaderDom,specialEqSafeRptSelect
  },
  data() {
    return {
      ...this.createCommonDataField(),
      modelSearch:false,
      columns1: [
        {title: '序号', width: 80, fixed: 'left', align: 'center', render: this.indexColumnsRender},
        {key: 'companyName', title: '所属单位', align: 'center', minWidth: 180, tooltip: true},
        {key: 'equipmentName', title: '特种设备名称', align: 'center', minWidth: 150, tooltip: true},
        {key: 'principal', title: '检查负责人', align: 'center', minWidth: 120},
        {key: 'maintenancUnit', title: '保养单位', align: 'center', minWidth: 150},
        {key: 'checkDate', title: '检查时间', align: 'center', minWidth: 120, render: this.renderCellDate},
        {key: 'maintainType', title: '保养类型', align: 'center', minWidth: 120},
        {key: 'quantity', title: '保养数量', align: 'center', minWidth: 120},
        {key: 'maintainDesc', title: '保养过程描述', align: 'center', minWidth: 200, tooltip: true},
        {key: 'createDate', title: '创建时间', align: 'center', minWidth: 120, render: this.renderCellDate},
        {key: 'createUserName', title: '填报人', align: 'center', minWidth: 120},
        this.getActionColumns()
      ],
      ruleCustom: {
        companyName: [{required: true, message: '请填写所属单位', trigger: 'change',}],
        equipmentName: [{required: true, message: '请填写特种设备名称', trigger: 'change',}],
        principal: [{required: true, message: '请填写检查负责人', trigger: 'change',}],
        maintenancUnit: [{required: true, message: '请填写保养单位', trigger: 'change',}],
        checkDate: [{required: true, message: '请填写检查时间', trigger: 'change', type: 'date'}],
        maintainType: [{required: true, message: '请填写保养类型', trigger: 'change',}],
        quantity: [{required: true, message: '请填写保养数量', trigger: 'change',type: 'number'}],
        maintainDesc: [{required: true, message: '请填写保养过程描述', trigger: 'change',}],
        createDate: [{required: true, message: '请填写创建时间', trigger: 'change', type: 'date'}],
        createUserName: [{required: true, message: '请填写填报人', trigger: 'change',}],

      },
      tableHeight: 10,
      // api
      queryUrl: Api.querySpecialEqMaintain,
      deleteUrl: Api.deleteSpecialEqMaintain,
      updateUrl: Api.updateSpecialEqMaintain,
      saveUrl: Api.saveSpecialEqMaintain,
    }
  },
  async mounted() {
    this.setTableHeight();

    this.query();
  },
  methods: {
    ...pageCommonFunction,
    deleteData(params) {
      this.deleteDateAjax(params);
    },
    danxuan(row) {
      this.dataToView.equipmentId = row.id
      this.dataToView.equipmentName = row.eqName
      this.modelSearch = false;

    },
    query() {
      if (this.dataToQuery.yearDate) {
        this.dataToQuery.year = this.dataToQuery.yearDate.getFullYear();
      }

      if (this.dataToQuery.auditTypeArrays) {
        this.dataToQuery.dipTypes = this.arrayToInFormat(this.dataToQuery.auditTypeArrays)
      }
      this.queryAjax();
    },
    submit(name) {
      this.submitAjax(name);
    },


    onSelectAuditBeginDateRange() {
      if (data[0] === "" || data[1] === "") {
        this.dataToQuery.auditBeginDateStart = null;
        this.dataToQuery.auditBeginDateEnd = null;
      } else {
        this.dataToQuery.auditBeginDateStart = data[0];
        this.dataToQuery.auditBeginDateEnd = data[1];
      }
    },
    onCancelSelect(){
      this.modelSearch = false;
    },
    onSelectAuditFinishDateRange() {
      if (data[0] === "" || data[1] === "") {
        this.dataToQuery.auditFinishDateStart = null;
        this.dataToQuery.auditFinishDateEnd = null;
      } else {
        this.dataToQuery.auditFinishDateStart = data[0];
        this.dataToQuery.auditFinishDateEnd = data[1];
      }
    },
    afterDataToViewInit() {
      this.getFiles('id');
    },
    createEmptyDataToAdd() {
      return {
        consultingFees: '',
        creatorPhone: this.currentUser.contactNumber,
        quantity: 0,
      }
    }
  },
  watch: {},

}
</script>

<style lang='css' scoped>

</style>
